<UserControl x:Class="SkinningSample.View.Page1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cmp="clr-namespace:Citrix.Cmp;assembly=Citrix.Cmp.WPF"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="300">
  
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- Top toolbar -->
    <Border Grid.Row="0" Style="{DynamicResource ToolbarBorderStyle}">
      <Grid>

        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Button Style="{DynamicResource NakedButtonStyle}" Command="{Binding PowerCommand}">
          <Path Style="{DynamicResource PowerIconStyle}"/>
        </Button>
      </Grid>
    </Border>
    
    <!-- Main content area -->
    <ScrollViewer Grid.Row="1">
      <Grid  Background="{DynamicResource SelectionGroupsBackgroundBrush}">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- A selection of sample controls -->
        <TextBlock Grid.Row="0" Margin="15,10,15,0" Text="Sample controls" Style="{DynamicResource SelectionGroupsHeaderTextStyle}"/>
        <cmp:ClippingBorder Grid.Row="1" Margin="10" CornerRadius="10" BorderThickness="1" BorderBrush="Gray"
                            Background="White">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
          
            <!-- The first entry is a button that will open a new page. -->
            <Button Style="{DynamicResource NakedButtonStyle}" FontSize="18" Foreground="Black" FontWeight="Normal"
                    HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" Padding="10"
                    Command="{Binding ShowBooksCommand}">
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
              
                <TextBlock Text="Books"/>
                <Path Grid.Column="1" Style="{DynamicResource NextPageArrowStyle}" />
              </Grid>
            </Button>
            <Rectangle Grid.Row="1" Style="{DynamicResource RectangleSeparatorStyle}"/>

            <!-- The second entry is a sample check box. -->
            <CheckBox Grid.Row="2" Style="{DynamicResource ChunkyCheckBoxStyle}" Content="Check box item"/>
            <Rectangle Grid.Row="3" Style="{DynamicResource RectangleSeparatorStyle}"/>
          
            <!-- Sample text input with keyboard popup. -->
            <Grid Grid.Row="4">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <TextBlock Text="Tap in textbox:" FontSize="16" VerticalAlignment="Center" Margin="10"/>
              <TextBox Grid.Column="1" FontSize="18" VerticalContentAlignment="Center"
                       Style="{DynamicResource SimpleBorderTextBoxStyle}"
                       cmp:ClientKeyboardController.AutoHideKeyboard="True"
                       cmp:ClientKeyboardController.AutoShowKeyboard="True"/>
            </Grid>
            <Rectangle Grid.Row="5" Style="{DynamicResource RectangleSeparatorStyle}"/>
          </Grid>
        </cmp:ClippingBorder>
      
        <!-- This section allows the user to manually configure which skin is being used. -->
        <TextBlock Grid.Row="2" Margin="15,10,15,0" Text="Set skin" Style="{DynamicResource SelectionGroupsHeaderTextStyle}"/>
        <cmp:ClippingBorder Grid.Row="3" Margin="10" CornerRadius="10" BorderThickness="1" BorderBrush="Gray"
                            Background="White">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Auto detect the skin. -->
            <RadioButton Content="Auto detect" GroupName="Skins" IsChecked="{Binding IsAutoSkin}"/>
            <Rectangle Grid.Row="1" Style="{DynamicResource RectangleSeparatorStyle}"/>
            
            <!-- Use the Android skin -->
            <RadioButton Grid.Row="2" Content="Android" GroupName="Skins" IsChecked="{Binding IsAndroidSkin}"/>
            <Rectangle Grid.Row="3" Style="{DynamicResource RectangleSeparatorStyle}"/>
            
            <!-- Use the iOS skin -->
            <RadioButton Grid.Row="4" Content="iOS" GroupName="Skins" IsChecked="{Binding IsIOSSkin}"/>
          </Grid>
        </cmp:ClippingBorder>
      </Grid>
    </ScrollViewer>
    
    <!-- Bottom toolbar -->
    <Border Grid.Row="2" Style="{DynamicResource ToolbarBorderStyle}">
      
    </Border>
  </Grid>
</UserControl>
